<template>
  <el-tooltip
    :content="isDark ? '切换到浅色模式' : '切换到深色模式'"
    placement="bottom"
    :effect="isDark ? 'light' : 'dark'"
  >
    <el-button
      class="theme-toggle"
      circle
      @click="toggleTheme"
      :aria-label="isDark ? '切换到浅色模式' : '切换到深色模式'"
    >
      <div class="icon-container">
        <!-- 太阳图标 - 当前是深色模式时显示 -->
        <el-icon v-if="isDark" class="sun-icon">
          <Sunny />
        </el-icon>

        <!-- 月亮图标 - 当前是浅色模式时显示 -->
        <el-icon v-else class="moon-icon">
          <Moon />
        </el-icon>
      </div>
    </el-button>
  </el-tooltip>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { Sunny, Moon } from '@element-plus/icons-vue';

// 创建一个响应式变量来跟踪当前主题
const isDark = ref(false);

// 检查系统偏好和本地存储
onMounted(() => {
  // 首先检查本地存储的主题偏好
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme) {
    // 如果有保存的主题偏好，使用它
    isDark.value = savedTheme === 'dark';
  } else {
    // 否则检查系统偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    isDark.value = prefersDark;
  }

  // 初始设置主题
  applyTheme();

  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    // 只有在用户没有明确设置主题偏好时才跟随系统
    if (!localStorage.getItem('theme')) {
      isDark.value = e.matches;
      applyTheme();
    }
  });
});

// 监视主题变化并应用
watch(isDark, () => {
  applyTheme();
});

// 切换主题
const toggleTheme = () => {
  isDark.value = !isDark.value;
  // 保存用户偏好到本地存储
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
};

// 应用主题到文档
const applyTheme = () => {
  if (isDark.value) {
    document.documentElement.classList.add('dark-theme');
  } else {
    document.documentElement.classList.remove('dark-theme');
  }
};
</script>

<style scoped>
.theme-toggle {
  --el-button-bg-color: transparent;
  --el-button-border-color: transparent;
  --el-button-hover-bg-color: var(--color-hover);
  --el-button-hover-border-color: transparent;
  --el-button-active-bg-color: var(--color-hover);
  --el-button-active-border-color: transparent;
  --el-button-text-color: var(--color-text);
  color: var(--color-text);
  transition: all 0.3s ease;
}

/* 深色模式下的主题切换按钮样式优化 */
.dark-theme .theme-toggle {
  /* 增加对比度，使图标在深色背景下更加清晰 */
  --el-button-text-color: #f8f9fa;
  color: #f8f9fa;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.el-icon {
  font-size: 18px;
}

.sun-icon, .moon-icon {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 优化太阳图标 */
.sun-icon {
  transform: rotate(15deg);
  /* 深色模式下的太阳图标颜色优化，减少刺眼感 */
  color: #ffe066;
  filter: brightness(0.95);
}

/* 优化月亮图标 */
.moon-icon {
  /* 浅色模式下的月亮图标颜色优化 */
  color: #495057;
}

/* 动画效果 */
.theme-toggle:active .icon-container {
  transform: scale(0.9);
}

/* 深色模式下的工具提示样式优化 */
.dark-theme .el-tooltip__popper.is-light {
  background-color: #2a2a2a;
  color: #f1f3f5;
  border-color: #444444;
}

.dark-theme .el-tooltip__popper.is-light .el-popper__arrow::before {
  background-color: #2a2a2a;
  border-color: #444444;
}
</style>
